<template>
  <!--    <el-dialog-->
  <!--            :title="title"-->
  <!--            v-model="dialogVisible"-->
  <!--            width="30%"-->
  <!--            @close="close">-->
  <!--        <span>{{content}}</span>-->
  <!--        <template #footer>-->
  <!--      <span class="dialog-footer">-->
  <!--        <el-button @click="close">取 消</el-button>-->
  <!--        <el-button type="primary" @click="close">确 定</el-button>-->
  <!--      </span>-->
  <!--        </template>-->
  <!--    </el-dialog>-->
  <div class="com-draw-view">

    <el-drawer
      v-model="drawer"
      custom-class="com-drawer"
      size="50%"
      :with-header="false"
      :direction="direction"
      :before-close="closeView"
    >

      <div class="drawer-content">

        <div class="draw-title">
          <div class="title-left">

            <span>{{ title }}</span>

            <span class="detail-title">{{ detailTitle }}</span>

          </div>

          <div class="title-right">
            <el-button size="mini" @click="closeView">返回</el-button>
          </div>

        </div>

        <div class="content-view">

          <attract-investment-detail />

          <!--                    <el-button @click="test">测试</el-button>-->

        </div>

      </div>
    </el-drawer>

  </div>

</template>

<script>
import attractInvestmentDetail from './modules/attractInvestmentPlanDetail/index.vue'
import {defineComponent, getCurrentInstance, onMounted, reactive, ref} from 'vue'

export default defineComponent({
  components: { attractInvestmentDetail },
  props: {
    close: {
      type: Function
    },
    type: {
      type: Number,
      default: 0
    },
    id: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const direction = ref('rtl')
    var data = reactive({})
    var title = ref('')
    var detailTitle = ref('')
    var drawer = ref(false)

    onMounted(() => {
      title.value = '产品详情'
      detailTitle.value = '阿莫西林'
      data.type = props.type
      data.id = props.id
    })

    const refreshData = (s) => {
      title.value = '终端详情'
      detailTitle.value = '西安市第一医院'

      data.type = s.type
      data.id = s.id
      drawer.value = true
    }

    const instance = getCurrentInstance()

    const closeView = () => {
      drawer.value = false
    }

    return {
      drawer,
      direction,
      data,
      title,
      detailTitle,

      refreshData,
      closeView
    }
  }
})
</script>

<style lang="scss">

    .com-draw-view{
        .draw-title{
            display: flex;
            height: 40px;
            justify-content: space-between;
            padding: 0 10px;
            align-items: center;
            border-bottom: 0.5px lightgray solid;

            .detail-title{
                padding-left: 20px;
                font-size: 18px;
                font-weight: bold;
            }
        }

        .com-drawer{
            .el-drawer__body{
                box-sizing: border-box;
                height: 100%;
                overflow-y: auto;

                .drawer-content{
                    height: 100%;

                    .content-view{
                        padding-top: 20px;
                        height: calc( 100% - 60px );
                        overflow-y: auto;
                    }
                }
            }
        }
    }

</style>
